@import '@/assets/main.scss';
.container {
	background-color: #fff;
}
.banner {
	position: relative;
	image {
		width: 750rpx;
	}
	.text {
		width: 670rpx;
		margin-left: 40rpx;
		text-align: center;
		position: absolute;
		top: 280rpx;
		.slogan {
			font-size: 58rpx;
			color: #ffffff;
		}
		.name {
			font-size: 33rpx;
			color: #ffffff;
		}
	}
}
.inspiring {
	text-align: center;
	background-color: #2a2a43;
	.title {
		@include font-style(32rpx, $heading-font-family, normal, #8f7a4a);
	}
	.slogan {
		@include font-style(46rpx, $heading-font-family, normal, #fff);
	}
	.content {
		text-align: justify;
		@include font-style(32rpx, $heading-font-family, normal, #8f7a4a);
	}
}

.football-hub {
	width: 750rpx;
	text-align: center;
	background-color: #2a2a43;
	.title {
		@include font-style(58rpx, $heading-font-family, normal, #ffffff);
	}
	.subtitle {
		@include font-style(50rpx, $heading-font-family, normal, #9cbce3);
	}
	.description {
		text-align: justify;
		@include font-style(32rpx, $heading-font-family, normal, #ffffff);
	}

	.hub-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		@include font-style(32rpx, $heading-font-family, normal, #9cbce3);
		.hub-element {
			width: 50%;
			text-align: center;
			image {
				width: 130rpx;
				margin: 0 auto;
			}
		}
	}
}

.football-coach {
	padding: 150rpx 50rpx;
	background-color: rgba(156, 188, 227, 0.4);
	text-align: center;
	@include font-style(32rpx, $heading-font-family, normal, #2a2a43);
	.title {
		@include font-style(58rpx, $heading-font-family, normal, #000000);
	}
	.title2 {
		display: flex;
		align-items: center;

		image {
			width: 70rpx;
		}
		view {
			margin-left: 20rpx;
		}
	}
	.level {
		padding: 50rpx;
		background-color: #fff;
		text-align: left;
		.head {
			@include font-style(58rpx, $heading-font-family, normal, #9cbce3);
		}
		.date {
			@include font-style(32rpx, $heading-font-family, normal, #9cbce3);
		}
		.body {
			.title {
				@include font-style(58rpx, $heading-font-family, normal, #000);
			}
			.subtitle {
				@include font-style(42rpx, $heading-font-family, normal, #8f7a4a);
			}
		}
		.description {
			@include font-style(30rpx, $heading-font-family, normal, #000);
		}
	}
}

.site-services {
	.title {
		@include font-style(58rpx, $heading-font-family, normal, #000);
	}

	.service {
		.title {
			@include font-style(58rpx, $heading-font-family, normal, #000);
		}
		.date {
			@include font-style(32rpx, $heading-font-family, normal, #9cbce3);
		}
		.text {
			@include font-style(32rpx, $heading-font-family, normal, #000);
		}
		.img {
			image {
				width: 100%;
			}
		}
	}
}
.site-tournament {
	.title {
		@include font-style(58rpx, $heading-font-family, normal, #000);
	}
	.text {
		@include font-style(32rpx, $heading-font-family, normal, #000);
	}
	.img {
		image {
			width: 100%;
		}
	}
}

.site-blog {
	.blog-title {
		width: 750rpx;
		height: 170rpx;
		line-height: 170rpx;
		text-align: center;
		background: #050505;
		@include font-style(58rpx, $heading-font-family, normal, #fff);
	}
	.blog {
		.title {
			background-color: #fff;
			@include font-style(58rpx, $heading-font-family, normal, #000);
		}
		.text {
			text-align: justify;
			@include font-style(32rpx, $heading-font-family, normal, #000);
		}
		.img {
			image {
				width: 100%;
			}
		}
	}
}
